<template>
	<el-row>
		<el-col :span="4">
			<div>
				<el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all accordion
					@node-click="selGoodsTypeByAdd">
				</el-tree>
			</div>
		</el-col>
		<el-col :span="20">			
				<el-table :data="goodsData" height="500">
					<el-table-column fixed prop="id" label="商品ID" width="80" align="center">
					</el-table-column>
					<el-table-column fixed prop="code" label="商品编码" width="100" align="center">
					</el-table-column>
					<el-table-column fixed prop="name" label="商品名称" width="120" align="center">
					</el-table-column>
					<el-table-column prop="inventoryQuantity" label="库存数量" width="120" align="center">
					</el-table-column>
					<el-table-column prop="minNum" label="库存下线" width="120" align="center">
					</el-table-column>
					<el-table-column prop="model" label="型号" width="120" align="center">
					</el-table-column>
					<el-table-column prop="producer" label="生产商" width="120" align="center">
					</el-table-column>
					<el-table-column prop="purchasingPrice" label="采购价" width="100" align="center">
					</el-table-column>
					<el-table-column prop="remarks" label="备注" width="120" align="center">
					</el-table-column>
					<el-table-column prop="sellingPrice" label="出库价" width="120" align="center">
					</el-table-column>
					<el-table-column prop="unit" label="商品单位" width="100" align="center">
					</el-table-column>
					<el-table-column prop="typeId" label="商品类型" width="100" align="center">
					</el-table-column>
					<el-table-column prop="maxNum" label="库存最大量" width="100" align="center">
					</el-table-column>
					<el-table-column prop="lastPurchasingPrice" label="上次采购价" width="100" align="center">
					</el-table-column>
					
				</el-table>
		</el-col>
	</el-row>
</template>

<script>
	export default {
		mounted() {
			this.queryAllType();
			this.goodsQuery();
		},
		methods: {
			
			
			
			goodsQuery() {
				this.$postRequest("/tGoods/queryTGoodsList/" + this.goodsObj.typeId).then(res => {
					this.goodsData = res.data.goodsList;
				});
			},
			selGoodsTypeByAdd(data) {
				//console.log(data);
				const state = data.state;
				console.log(state + "===========")
				if (state != 0) {
					console.log("===")
				} else {
					this.goodsObj.typeName = data.name;
					this.goodsObj.typeId = data.id;
					this.goodsQuery();
				}
			},
			queryAllType() {
				this.$postRequest("/tGoodsType/tGoodsTypeQuery/" + this.id).then(res => {
					this.data = res.data.goodsTypeList;
				});

			},
	
		},

		data() {
			return {
				headers: {"Content-Type": "multipart/form-data;charset=UTF-8"},
				TGoods: {
					id: null,
					code: '',
					inventoryQuantity: '',
					minNum: '',
					model: '',
					name: '',
					producer: '',
					purchasingPrice: '',
					remarks: '',
					sellingPrice: '',
					unit: '',
					typeId: '',
					maxNum: '',
					lastPurchasingPrice: ''
				},
				formLabelWidth: '120px',
				goodsData: [],
				goodsObj: {
					typeName: '',
					typeId: 0
				},
				data: [],
				id: 1,
				defaultProps: {
					children: 'children',
					label: 'name'
				},
			};
		}
	};
</script>

<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>